<template>
  <div class="login_container">
    <div id="u3_text" class="text" style="position: absolute;text-align: center;
    width: 100%;height: 100px;filter:opacity(80%);top: 100px">
      <p style="font-size:44px;">
            <span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">
              人力资源管理系统
            </span>
      </p>
      <p style="font-size:20px;">
            <span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">
              Human&nbsp; Resource&nbsp; Management
            </span>
        <span style="font-family:'微软雅黑';font-weight:400;"> </span></p>
    </div>
    <div id="u3" style="text-align: center">

    </div>
    <div class="login_box">
      <div class="avatar_box">
        <img src="../assets/u19.png" />
      </div>
      <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginFormRules"
          label-width="0px"
          class="login_form"
      >
        <el-form-item prop="userName">
          <el-input prefix-icon="el-icon-user" placeholder="用户名" v-model="loginForm.empName"></el-input>
        </el-form-item>
        <el-form-item prop="userPassword">
          <el-input
              prefix-icon="el-icon-lock"
              placeholder="密码"
              v-model="loginForm.empPassword"
              type="password"
          ></el-input>
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button type="info" @click="resetLogin">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div id="u22_text" class="text">
      <p id="cache0">
          <span style="font-family:'微软雅黑';font-weight:400;" id="cache1">
            <br id="cache2">
          </span>
      </p>
      <p id="cache3">
          <span style="font-family:'微软雅黑';font-weight:400;" id="cache4">
            Copyright ©
          </span>
        <a id="u23" class="link" title="点击打开www.baidu.com" tabindex="0" style="cursor: pointer;">
            <span style="font-family: 微软雅黑; font-weight: 400;" id="cache5">
              www.AugustRM.com
            </span>
        </a>
        <span style="font-family:'微软雅黑';font-weight:400;" id="cache6">
            , All Rights Reserved.
          </span>
      </p>
      <p id="cache7">
          <span style="font-family:'微软雅黑';font-weight:400;" id="cache8">
            一站式人力资源管理平台.助力企业人才数字化转型
          </span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginForm: {
        empName: "",
        empPassword: ""
      },
      loginFormRules: {
        empName: [
          { required: true, message: "用户名必填", trigger: "blur" },
          { min: 4, max: 8, message: "用户名在4到8个字符之间", trigger: "blur" }
        ],
        empPassword: [
          { required: true, message: "密码必填", trigger: "blur" },
          {
            min: 4,
            max: 8,
            message: "用户密码在4到8个字符之间",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    resetLogin() {
      this.$refs.loginForm.resetFields();
    },

    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid){
          let  url = this.$HRMSUrl+"employee/login";
          this.$axios.post(url,this.loginForm)
              .then(res=>{
                if (res.data.code === 200){
                  console.log(res)
                  let manager = res.data.data;
                  sessionStorage.setItem("managerInfo",JSON.stringify(manager));
                  sessionStorage.setItem("token",res.data.token)
                  //转到主页
                  // location.href = "/Home"
                  this.$router.push("/home");
                }else {
                  this.$message({
                    type:"error",
                    message:res.data.msg,
                    duration:1000
                  })
                }
              })

        }else {
          return false ;
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>

.login_container {
  //background-color: #2b4b6b;
  height: 100%;
  width: 100%;
  background-color: rgb(153, 153, 153);
  background-image:url("../assets/bg.png");
  background-attachment: scroll;
  background-size: cover;
  border-width: 0px;
  background-position: right top;
  background-repeat: no-repeat;
  position: absolute;
  //left: 0px;
  //top: 0px;
  overflow-x: hidden;
  overflow-y: hidden;
}
.login_box {
  width: 450px;
  height: 300px;
  background-color: #fff;
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar_box {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: 1px solid #eee;
    padding: 10px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -30%);
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #eee;
    }
  }
}
.btns {
  display: flex;
  justify-content: center;
}
.login_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
}
#u3 {
  left: 0;
  top:200px;
  height: 400px;
  width: 100%;
  color: white;
  background-color: RGb(118,118,119);
  filter:opacity(30%)
}
#u22_text{

  height: 150px;
  text-align: center;
  width: 100%;
  top: 85%;
  color: white;
  filter:opacity(70%);
}


</style>